<template>
	<view class="bang-box">

		<!-- 主要玩法 -->
		<view class="main-acitivity">
			<view class="activity-kinds">
				<view to="/rewardonce" v-for="(item,index) in hotactivity" class="main-act"
					:class="{'active' : tabIndex == index }" @click="checktabIndex(index)" :data-text="item">{{item}}
				</view>
			</view>
			<!-- 进行中 -->
			<view class="content">
				<activitycard :isgoing='isgoing'></activitycard>
			</view>
		</view>
		<!-- 已结束 -->
		<!-- 		<view class="content" v-if="tabIndex==1">
			<activitycard></activitycard>
		</view> -->
	</view>
</template>

<script>
	import activitycard from './components/activity-card.vue'

	export default {
		data() {
			return {
				// 活动状态
				isgoing: true,
				indicator: true,
				hotactivity: ['进行中', '已结束'],
				tab: '',
				bgColor: '#000000',
				tabIndex: 0,
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}]
			}
		},
		methods: {
			// 改变展示的活动
			checktabIndex(tabIndex) {
				this.tabIndex = tabIndex
				console.log(tabIndex)
				this.isgoing = tabIndex
				console.log(this.isgoing)
			},
		},
		components: {
			activitycard
		}
	}
</script>

<style lang="scss" scoped>
	// 首页背景色
	.stardard {
		margin: 34rpx 26rpx;
	}

	.bang-box {
		width: 100%;
		height: 100%;
		background-color: rgb(10, 10, 10);

		.bang {
			color: white;
			font-family: DOUYU;
		}

		.bang-banner {
			background-color: black;
			text-align: center;
		}

		// 热门活动样式
		.hot-activity {
			.hot-title {
				margin-bottom: 34rpx;
				display: flex;
				color: white;
				justify-content: space-between;
				align-items: center;

				.tit-lef {
					color: orange;
					font-size: 36rpx;
					font-family: YouSheBiaoTiHei;

				}

				.tit-rig {
					font-size: 12rpx;
				}
			}

			.activity-banner {
				overflow: hidden;

				.u-scroll-list {
					padding-bottom: 0px;

					.hot-banner {
						height: 128rpx;
						width: 256rpx;
						margin: 0 10rpx;

						.card-img {
							height: 128rpx;
							width: 256rpx;
							overflow: hidden;
						}
					}
				}
			}
		}

		.main-acitivity {

			.activity-kinds {
				color: white;
				display: flex;
				justify-content: left;
				align-items: center;
				margin: 0 26rpx;

				.main-act {
					margin-right: 64rpx;
					font-size: 48rpx;
					font-family: YouSheBiaoTiHei;
					color: rgb(132, 132, 132);
				}


				.active {
					color: #000000;
					font-weight: 400;
					position: relative;
					z-index: 0;
					text-shadow: 0rpx 10rpx 12rpx orange;
				}

				.active::before,
				.active::after {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
				}

				.active::before {
					-webkit-text-stroke: 6rpx #fff;
					transform: translateZ(80%);
				}
			}

			.goods-cards {
				.card-item {
					border-radius: 15rpx;
					margin: 26rpx auto;
					color: white;
					width: 690rpx;
					height: 300rpx;
					background-color: rgb(29, 29, 29);
					display: flex;
					justify-content: left;
					align-items: center;

					.card-lef {
						width: 252rpx;
						height: 252rpx;
						overflow: hidden;
						margin: 0 24rpx;

						.card-img {
							width: 100%;
							height: 100%;
						}
					}

					.card-rig {
						width: 366rpx;
						height: 252rpx;
						display: flex;
						flex-direction: column;
						position: relative;

						.good-name {
							font-size: 28rpx;
							margin-bottom: 12rpx;
						}

						.good-price {
							font-size: 24rpx;
							margin-bottom: 12rpx;

							height: 40rpx;
							position: relative;

							.pricedemo {
								font-size: 40rpx;
							}
						}

						.good-rest {
							font-size: 20rpx;
							text-align: right;
						}

						.good-progress {
							height: 10rpx;
							margin: 12rpx 0;

							.good_rest_line {
								display: flex;

								.line_left {
									height: 8rpx;
									margin-top: 4rpx;
									border-radius: 4rpx;
									background: orangered;
								}

								.line_right {
									height: 8rpx;
									margin-top: 4rpx;
									border-top-right-radius: 4rpx;
									border-bottom-right-radius: 4rpx;
									background: gray;
								}
							}
						}

						.good-show {
							display: flex;
							justify-content: space-around;
							position: absolute;
							bottom: 0;

							.show-img {
								width: 84rpx;
								height: 84rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}

		}

	}
</style>